<template>
  <div v-if="datas">
    <div v-show="showing" class="amoy-modal" @click="hideStandard"></div>
    <div class="amoy-modal-content" v-show="showing">
      <div class="amoy-goodsku-box">
        <div class="amoy-goodsku-img">
          <img  :src="choosedcover" alt="">
        </div>
        <div class="amoy-goodsku-detail">
          <h4>{{choosedname}}</h4>
          <p><i class="">价格：¥{{price}}</i > <em v-show="datas.goods.goods_type==0">库存：{{stock}}</em></p>
          <p v-show="datas.goods.goods_type==0">已选：{{selectedStr}}</p>
        </div>
        <div @click="hideStandard"><i class="iconfont icon-guanbi"></i></div>
      </div>
      <ul class="amoy-select" >
        <li class="amoy-select-box" v-for="(list,iIndex) in datas.attrList">
          <p class="amoy-select-name">{{list.attr_name}}</p>
          <div class="amoy-select-items">
            <div class="amoy-select-value" v-for="(item,jIndex) in list.attr_value_list" @click="choosedParams(item.choosed,item.disabled,iIndex,jIndex,item.attr_id,item.id)">
              <p class="" :class="{'choosed':item.choosed==true,'disabled':item.disabled==true}">{{item.attr_value}}</p>
            </div>
          </div>
        </li>
      </ul>
      <div class="amoy-num">
        <p class="amoy-num-head">数量</p>
        <div class="amoy-num-box">
          <i class="amoy-num-icon iconfont icon-jianhao" @click="minusNum">-</i>
          <input class="amoy-num-input" type="number"  v-model="number"/>
          <i class="amoy-num-icon iconfont icon-jiahao" @click="addNum ">+</i>
        </div>
      </div>
      <div class="amoy-btn-fullbottom" @click="value_change"><p>{{buyType? '立即购买':'加入购物车'}}</p></div>
    </div>
  </div>
</template>
<style scoped>
  .amoy-goodsku-box{
    padding: 0.5rem 0.5rem 0;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-content: center;
  }
  .amoy-goodsku-box .amoy-goodsku-img{
    width: 5rem;
    height: 3.95rem;
    position: relative;
    flex-shrink: 0;
  }
  .amoy-goodsku-box .amoy-goodsku-img img{
    width: 100%;
    height: 5rem;
    border: 1px solid #DCDCDC;
    box-sizing: border-box;
    border-radius: 0.3rem;
    overflow: hidden;
    position: absolute;
    top: -1.6rem;
    left: 0;
    background-color: #fff;
  }
  .amoy-goodsku-box .amoy-goodsku-detail{
    overflow: hidden;
  }
  .amoy-goodsku-box .amoy-goodsku-detail h4{
    font-size:0.75rem;
    color: #333333;
    text-align: left;
    padding:0 0.5rem 0.25rem;
    line-height: 0.9rem;
    height: 0.9rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .amoy-goodsku-box .amoy-goodsku-detail p{
    font-size:0.6rem;
    color: #666;
    text-align: left;
    padding:0.2rem 0.5rem 0;
    line-height: 1rem;
  }
  .amoy-goodsku-box .amoy-goodsku-detail p i{
    font-size: 0.7rem;
    padding-right: 0.5rem;
  }
  .amoy-select{
    padding:0 0.5rem;
    box-sizing: border-box;
  }
  .amoy-select .amoy-select-box .amoy-select-name{
    font-size: 0.7rem;
    color: #333333;
    letter-spacing: 1px;
    padding: 0.4rem 0 0.5rem ;
  }
  .amoy-select .amoy-select-box .amoy-select-items .amoy-select-value{
    min-width: 25%;
    box-sizing: border-box;
    padding-right: 0.75rem;
    margin-bottom: 0.75rem;
    display: inline-block;
  }
  .amoy-select .amoy-select-box .amoy-select-items .amoy-select-value p{
    font-size: 0.6rem;
    background: #DCDCDC;
    border-radius: 0.25rem;
    padding: 0.25rem 0.4rem;
    text-align: center;
    color: #000;
    letter-spacing: 1px;
    min-height: 0.6rem;
    /*display: inline-block;*/
  }
  .amoy-select .amoy-select-box .amoy-select-items .amoy-select-value p.choosed{
    background: #46CC8A;
    color: #ffffff;
  }
  .amoy-select .amoy-select-box .amoy-select-items .amoy-select-value p.disabled{
    color: #bbb;
    background: #F7F7F7;
  }

  .amoy-num{
    padding:0.4rem 0.5rem 1.1rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-content: center;
  }
  .amoy-num .amoy-num-head{
    font-size: 0.7rem;
    color: #333333;
    line-height: 1.2rem;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .amoy-num .amoy-num-box .amoy-num-icon{
    background: #DCDCDC;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 100%;
    line-height: 1.2rem;
    text-align: center;
    font-size: 0.6rem;
    color: #ffffff;
    vertical-align: middle;
  }
  .amoy-num .amoy-num-box .amoy-num-input{
    border: 1px solid #F4F4F4;
    background: transparent;
    font-size: 0.6rem;
    color: #666666;
    text-align: center;
    width: 1.8rem;
    line-height: 1.2rem;
    display: inline-block;
    margin: 0 0.25rem;
    vertical-align: middle;
  }
  .amoy-btn-fullbottom{
    position: static;
  }
</style>
<script type="text/ecmascript-6">
import  { Toast } from 'vux'
export default({
  name: 'standard',
  components:{
		Toast
	},
  props: {
    datas: {
      type: Object
    },
    showing: {
      type: Boolean
    },
    buyType: {
      type: Boolean,
      default: true
    },
    inputDisable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      stock: 0,
      price: 0,
      choosedid: '',
      choosedname: '',
      choosedcover: '',
      number: 1,
      selectedStr: '',
      selected:[]
    };
  },
  created () {
    this.skuInit()
  },
  methods: {
    skuInit () {
      this.price = this.datas.goods.price
      this.choosedname = this.datas.goods.goods_name
      this.choosedcover = this.datas.goods.goods_cover
      let allAttr = this.datas.itemList
      if (allAttr.length === 1) {
        this.stock = this.datas.itemList[0].stock
        this.choosedid = this.datas.itemList[0].id
        this.selectedStr = '默认'
      }
      allAttr.forEach((goods, i) => {
        let attributeJson = goods.goods_sku
        attributeJson = attributeJson.split('#')
        let newarr = []
        attributeJson.forEach((attr, j) => {
          attr = attr.split(':')
          let newjson = {id: attr[0], vid: attr[1]}
          newarr.push(newjson)
        })
        goods.attribute_json = newarr
      })
      this.getParams()
    },
    hideStandard () {
//        隐藏组件
      this.$emit('on-show-change', false)
    },
    addNum () {
//        加数量
      if (this.stock) {
        if (this.number < this.stock) {
          this.number++
        }
      } else {
        this.number++
      }
    },
    minusNum () {
//        减数量
      let minNum = 1
      if (this.number > minNum) {
        this.number--
      }
    },
    getParams () {
//        普通商品规格渲染
      if (this.datas.attrList) {
        let allParams = this.datas.attrList
        for (let i = 0; i < allParams.length; i++) {
          if (allParams[i].attr_value_list.length === 0) {
            this.datas.attrList.splice(i, 1)
          }else if (allParams[i].attr_value_list.length === 1) {

          }
          else {
            for (let j = 0; j < allParams[i].attr_value_list.length; j++) {
              this.$set(allParams[i].attr_value_list[j], 'choosed', false)
              this.$set(allParams[i].attr_value_list[j], 'disabled', false)
            }
          }
        }
      }
    },
    choosedParams (status, disable, nameIndex, valueIndex, nameId, valueId) {
//        选择规格
      if (disable === true) {
        return;
      }
      let allParams = this.datas.attrList
      allParams.forEach((params, i) => {
        if (nameIndex == i) {
          params.attr_value_list.forEach((attrVal, j) => {
            if (valueIndex == j) {
              if (status === true) {
                this.$set(attrVal, 'choosed', false)
                this.choosedid = '';
              } else {
                this.$set(attrVal, 'choosed', true)
              }
            } else {
              this.$set(attrVal, 'choosed', false)
            }
          });
        }
      });
      this.forEachParams(status, nameId, valueId)
      this.forEachSelectParam()
    },
    forEachParams (state, nId, vId) {
      let allAttr = this.datas.itemList;
      let siglearr = [];
      let valsarr = []
      allAttr.forEach((goods, i) => {
        let attributeJson = goods.attribute_json;
        attributeJson.forEach((attr, j) => {
          if (attr.id == nId && attr.vid == vId) {
            siglearr = attributeJson
            siglearr.forEach((attrs, i) => {
              if (attrs.id != nId) {
                valsarr.push(parseInt(attrs.vid))
              }
            })
          } else {
          }
        });
      });
      let allParams = this.datas.attrList;
          allParams.forEach((params, j) => {
            if (params.id != nId){
              params.attr_value_list.forEach((vals, k) => {
                if (valsarr.indexOf(vals.id) != -1) {
                  this.$set(vals, 'disabled', false);
                } else {
                  if (state === true) {
                    this.$set(vals, 'disabled', false);
                  } else {
                    this.$set(vals, 'disabled', true);
                  }
                }
              });
            } else {
            }
          });
    },
    forEachSelectParam () {
//      判断是否所有规格均有选择值从而获得当前组合规格的商品
      this.selected = []
      let selectedString = []
      let allParams = this.datas.attrList
      allParams.forEach((params, i) => {
        params.attr_value_list.forEach((attrVal, j) => {
          if (attrVal.choosed === true) {
            let string = attrVal.attr_id + ':' + attrVal.id
            this.selected.push(string)
            selectedString.push(attrVal.attr_value)
            this.selectedStr = selectedString.toString()
          }
        })
      })
      if (this.selected.length === allParams.length) {
        this.getSelectedGoods(this.selected);
      }
    },
    getSelectedGoods (array) {
      let id = ''
      this.datas.itemList.forEach((goods, i) => {
        let attributeJson = goods.goods_sku
        attributeJson = attributeJson.split('#')
        let  result = true
        array.forEach((arr, x) => {
          if (attributeJson.includes(arr) === false) {
            result = false
            return
          }
        })
        if (result === true) {
          id = goods.id
          this.choosedid = goods.id
          this.price = goods.price
          this.stock = goods.stock
          this.choosedname = goods.goods_name
          this.choosedcover = goods.goods_cover
          return
        }
      })
    },
    //组件数据传递
    value_change () {
      let data = {
        name: this.choosedname,
        img: this.choosedcover,
        price:  this.price,
        skuid:  this.choosedid,
        skustr: this.selectedStr,
        num: this.number
      }
      this.$emit('on-value-change', data)
      this.$emit('on-show-change', false)
    }
  },
  watch: {
    datas (val) {
      if (val !== undefined) {
        this.datas = val
      }
    }
  }
});
</script>
